/******************** 变量 ********************/
$input-border-color-focus: $primary-color;
$input-focus-bg-color: transparent;
$input-group-disabled-bg-color: transparent;
$input-size-default-line-height: 1.57142857;
$input-size-large-line-height: 1.57142857;
$textarea-min-height: 0.38rem;

$input-color: (default, $border-color-base, $input-background, $text-color),
  (hover, $border-color-hover, $input-background, $text-color),
  (focus, $input-border-color-focus, $input-background, $text-color),
  (active, $border-color-active, $input-background, $text-color),
  (disabled, $border-color-disabled, $disabled-background, $text-color-disabled) !default;
$input-space: $space-base * 2;

/******************** mixin ********************/

/******************** 组件 ********************/
@include colorState('.lv-input', $input-color);
@include colorState('.lv-input-group:not(.lv-input-group-disabled)', $input-color);

.lv-input {
  width: 100%;
  color: $text-color;
  font-size: $font-size-base;
  line-height: $line-height-base;
  vertical-align: middle;
  border-style: $border-style-base;
  border-width: $border-width-base;
  border-radius: $border-radius-md;

  @include motion-input;

  &.lv-input-disabled {
    border-color: $border-color-disabled;
    background: $disabled-background;
    color: $text-color-disabled;
    cursor: not-allowed;
  }

  &:disabled::placeholder,
  &.lv-input-disabled::placeholder {
    color: $text-color-disabled;
  }

  &:not(textarea) {
    &.lv-input-size-default {
      padding: $padding-xs $padding-sm;
      height: $height-base;
      line-height: $input-size-default-line-height;
    }

    &.lv-input-size-large {
      padding: $padding-sm $padding-sm;
      height: $height-lg;
      line-height: $input-size-large-line-height;
    }
  }
}

textarea.lv-input {
  height: auto;
  min-height: $textarea-min-height;
  padding: $padding-sm;
  overflow: auto;
  line-height: $line-height-coeff-minor;
  letter-spacing: 0;
  text-align: start;
  vertical-align: bottom;
  resize: vertical;

  &:disabled,
  &.lv-input-disabled {
    resize: none;
  }
}

.lv-input-limit {
  textarea.lv-input {
    border-color: $error-color;
  }
}

textarea.lv-textarea-autosize-measuring {
  box-sizing: content-box !important;
  height: auto !important;
  padding: 0.02rem 0 !important;
  overflow: hidden !important;
}

.lv-input-lint {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: middle;

  .lv-input-count {
    position: absolute;
    right: 0.1rem;
    bottom: 0.02rem;
    color: $input-count-color;
    font-size: $font-size-sm;
    line-height: $line-height-sm;
  }

  .lv-count-emphasize {
    color: $text-color;
  }

  .lv-count-limit {
    color: $text-color-error;
  }

  & > textarea {
    word-break: break-all;
  }

  & > textarea:disabled {
    resize: none;
  }
}

@include input-help-tooltip($margin-sm);

.lv-input-group {
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 $input-space;
  border-style: $border-style-base;
  border-width: $border-width-base;
  border-radius: $border-radius-md;

  @include motion-state;

  &:focus-within {
    color: $text-color;
    background: $input-focus-bg-color;
    border-color: $input-border-color-focus;
  }

  .lv-input-before,
  .lv-input,
  .lv-input-after {
    padding: 0;
    border: none;
  }

  .lv-input:not(textarea) {
    padding: $padding-xs 0;
  }

  > .lv-input-before,
  > .lv-input-after {
    display: inline-flex;
    align-items: center;
    color: $text-color-tertiary;
    line-height: 1;
    white-space: nowrap;
  }

  > .lv-input-after {
    .lv-icon-host {
      color: $icon-color;
    }
  }

  > .lv-input-before::after,
  > .lv-input-after::before {
    display: inline-block;
    width: 0.01rem;
    height: 0.2rem;
    margin: 0 $input-space;
    background-color: $border-color-base;
    content: '';
  }

  &:hover:not(.lv-input-addElement) {
    .lv-input:not(:focus):not(:disabled),
    .lv-input:not(:focus):not(.lv-input-disabled) {
      border-color: $border-color-hover-input;
    }
  }

  &.lv-input-group-default {
    height: $height-base;

    .lv-input:not(textarea) {
      height: 0.3rem;
    }
  }

  &.lv-input-group-large {
    height: $height-lg;

    .lv-input:not(textarea) {
      height: 0.38rem;
    }
  }

  > .lv-input-prefix,
  > .lv-input-suffix {
    position: absolute;
    top: 50%;
    z-index: 2;
    color: $text-color-tertiary;
    line-height: 0;
    transform: translateY(-50%);
  }

  > .lv-input-prefix {
    left: $input-space;
  }

  > .lv-input-suffix {
    right: $input-space;

    .lv-icon-host {
      color: $icon-color;
    }

    // 文本域组合的demo适配
    .lv-hasValue {
      color: $text-color;
    }
  }

  > .lv-input-before + .lv-input-prefix {
    position: relative;
    line-height: 0.3rem;
    margin-right: 0.04rem;
  }

  &.lv-input-addElement {
    .lv-input {
      border-radius: 0;

      &:first-child {
        border-top-left-radius: $border-radius-xs;
        border-bottom-left-radius: $border-radius-xs;
      }

      &:last-child {
        border-top-right-radius: $border-radius-xs;
        border-bottom-right-radius: $border-radius-xs;
      }
    }
  }

  &.lv-input-group-disabled {
    color: $text-color-disabled;
    background-color: $disabled-background;
    border-color: $border-color-disabled;

    > .lv-input {
      background-color: $input-group-disabled-bg-color;
    }

    > .lv-input-suffix,
    > .lv-input-prefix {
      color: $icon-color-disabled;

      > i {
        color: $icon-color-disabled;
      }

      // 文本域组合的demo适配
      .lv-hasValue {
        color: $text-color-disabled;
      }
    }

    > .lv-input-before,
    > .lv-input-after {
      color: $icon-color-disabled;

      > i {
        color: $icon-color-disabled;
      }
    }
  }
}

.lv-input-group:not(.lv-input-group-disabled):focus-within {
  color: nth(nth($input-color, 3), 4);
  background: nth(nth($input-color, 3), 3);
  border-color: nth(nth($input-color, 3), 2);
}

.lv-form-control-has-error {
  .lv-input-group.lv-input-group-error {
    border-color: $error-color !important;
  }
}
